<template>
  <div class="login_box">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>用户登录</span>
      </div>
      <div>
        <el-form :model="loginForm" label-width="0px" class="login_form">
          <el-form-item>
            <el-input v-model="loginForm.userId" prefix-icon="el-icon-s-custom"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="loginForm.userPassword" prefix-icon="el-icon-lock" type="password"></el-input>
          </el-form-item>
          <el-form-item>
          
          </el-form-item>
          <el-form-item class="btns">
            <el-button class="btnNot" @click="quit()">取 消</el-button>
            <el-button type="warning" @click="Login()">登 录</el-button>
            <el-button type="warning" @click="AdminLogin()" style="float: right;">管理员入口</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm:{
       userId:"",
       userPassword:"",
      }
    };
  },
  methods: {
    // 用户登录
    Login() {
      var that = this;
      that.$axios
        .post( "/user/userLogin?userId=" +that.loginForm.userId +"&userPassword=" +that.loginForm.userPassword,{
        })
        .then(function(response) {
          console.log(response.data.data);
          if (response.data.data == null) {
            alert("账号或密码错误，请重新输入");
          } else {
            localStorage.setItem("user", JSON.stringify(response.data.data));
            that.$router.push("/");
            window.location.reload(true);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 管理员登录
    AdminLogin() {
      var that = this;
      that.$axios
        .post( "/admin/adminLogin?adminId=" +that.loginForm.userId + "&adminPassword=" + that.loginForm.userPassword, {
        })
        .then(function(response) {
          console.log(response);
          if (response.data.data == null) {
            alert("账号或密码错误，请重新输入");
          } else {
            localStorage.setItem("adminUser", JSON.stringify(response.data.data));
            that.$router.push("/admin");
            window.location.reload(true);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //取消
    quit() {
      var that = this;
      that.$router.push("/");
    },
  }
};
</script>

<style lang="less" scoped>
//支持less语法格式，scoped用来控制组件样式生效区间，只在当前组件内生效
.login_box {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}
.login_box .el-card {
  border: 0px;
}
.box-card {
  width: 480px;
}
.clearfix {
  clear: both;
  font-size: 18px;
  font-weight: bold;
}
.otherLogin {
  display: flex;
  flex-direction: row;
}
.other {
  margin-right: 10px;
  color: #999;
}
.btnNot:hover {
  color: #e6a23c;
  border-color: #e6a23c;
  background-color: #faf3e8;
}
</style>